<script setup lang="ts">
import { ref } from 'vue';
const foods = ref(['苹果', '香蕉', '梨']);
const obj = ref({
  name: '张三',
  age: 18
})
</script>


<template>
  <div>
    <!-- 列表渲染 -->
    <p v-for="(item, index) in foods" :key="item">
      {{ index + 1 }} {{ item }}
    </p>
    <!-- ul 无序列表 前面有装饰小圆点 -->
    <!-- ol 有序列表 前面有数字序号 -->
    <ol>
      <li v-for="item in foods">
        {{ item }}
      </li>
    </ol>
    <ol>
      <li v-for="item in Array.from({ length: 10 })">小苹果儿</li>
    </ol>

    <!-- 循环数字 可以快速生成测试结构 -->
    <ol>
      <li v-for="item in 5">测试结构</li>
    </ol>
    <ol v-for="(value,key,index) in obj">
      {{ index }} {{ key }} {{ value  }}
    </ol>
  </div>
</template>
